<template>
  <div class="scene-work" v-loading="loading">
    <div class="statistics-info">
      <div :class="['statistics-card', currentSceneType === inScene && 'checked']" @click="sceneChange(inScene)">
        <div class="statistics-info-title">入库计划</div>
        <div class="statistics-info-item">
          <span class="statistics-info-item-label">未完成(柜)</span>
          <span class="statistics-info-item-content">{{ statisticsInfo.inNoFinishChestNum }}</span>
        </div>
        <div class="statistics-info-item">
          <span class="statistics-info-item-label">重量(KG)</span>
          <span class="statistics-info-item-content">{{ thousandthPercentile(statisticsInfo.inWeight) }}</span>
        </div>
      </div>
      <div :class="['statistics-card', currentSceneType === outScene && 'checked']" @click="sceneChange(outScene)">
        <div class="statistics-info-title">出库计划</div>
        <div class="statistics-info-item">
          <span class="statistics-info-item-label">未完成(车)</span>
          <span class="statistics-info-item-content">{{ statisticsInfo.outNoFinishCarNum }}</span>
        </div>
        <div class="statistics-info-item">
          <span class="statistics-info-item-label">柜数(柜) | 重量(KG)</span>
          <span class="statistics-info-item-content">{{
              `${statisticsInfo.outChestNum} | ${thousandthPercentile(statisticsInfo.outWeight)}`
            }}</span>
        </div>
      </div>
    </div>
    <div class="work-search-frame">
      <Input v-model="listQuery.searchKey" placeholder="请输入商品品名、箱号、车号查询" style="width: 250px"
             @on-enter="searchKeyInfo"></Input>
      <span class="margin-left-5">
        计划状态：
        <Select v-model="searchForm.inPlanOrderStatus" multiple transfer clearable style="width: 200px">
          <Option v-for="item in planStatusList" :key="item.lcatValue" :value="item.lcatValue">
            {{ item.lcatName }}
          </Option>
        </Select>
      </span>
      <template v-if="isInWork">
        <span class="margin-left-5">
          预计到达时间：
          <DatePicker v-model="searchForm.startArrivedDate" placeholder="请选择" style="width: 200px" type="daterange"
                      transfer></DatePicker>
        </span>
        <span class="margin-left-5">
          入库日期：
          <DatePicker v-model="searchForm.endRegisterDate" placeholder="请选择" style="width: 200px" type="daterange"
                      transfer></DatePicker>
        </span>
      </template>
      <template v-else>
        <span class="margin-left-5">
          预计提货日期：
          <DatePicker v-model="searchForm.expectedDelivery" placeholder="请选择" style="width: 200px" type="daterange"
                      transfer></DatePicker>
        </span>
        <span class="margin-left-5">
          出库日期：
          <DatePicker v-model="searchForm.exWarehouse" placeholder="请选择" style="width: 200px" type="daterange"
                      transfer></DatePicker>
        </span>
      </template>
<!--      <span class="margin-left-5">-->
<!--        计划号：-->
<!--        <Input v-model="searchForm.planOrderNumList" placeholder="请输入完整计划号，多个使用逗号隔开"-->
<!--               style="width: 250px;" @on-enter="searchKeyInfo"></Input>-->
<!--      </span>-->
      <span class="margin-left-5">
        <Button type="primary" @click="searchKeyInfo">查询</Button>
        <Button class="margin-left-5" type="primary" @click="reset">重置</Button>
        <Button v-if="!isInWork" class="margin-left-5" type="primary" @click="createdOutWork">新增</Button>
      </span>
    </div>
    <div style="text-align: right; margin-bottom: 5px">
      <Page :total="listQuery.total" :current="listQuery.pageNum" :page-size="listQuery.pageSize"
            :page-size-opts="listQuery.pageOptionsList"
            @on-change="pageChange" @on-page-size-change="pageSizeChange" show-sizer show-total></Page>
    </div>
    <div style="height: calc(100vh - 340px);" class="work-data">
      <template v-if="dataList.length">
        <div class="data-card" v-for="(item, index) in dataList" :key="index">
          <div class="data-operate">
            <template v-if="!isInWork">
              <Dropdown v-if="item.id !== null && item.status !== '1'" placement="bottom-end">
                <a href="javascript:void(0)" class="colorInfo">
                  <span style="font-size: 14px">操作</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem class="font-bold" @click.native.stop="editInfo(item)">编辑</DropdownItem>
                  <DropdownItem class="font-bold" @click.native.stop="submitInfo(item)">提交</DropdownItem>
                  <DropdownItem class="font-bold" @click.native.stop="deleteInfo(item)">删除</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </template>
            <div>
              <span type="text" @click="getDetailInfo(item)" class="colorInfo">
                {{ !item.showDetail ? '展开详情' : '收起详情' }}
                <i class="colorInfo" :class="!item.showDetail ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i>
              </span>
            </div>
          </div>
          <template v-if="isInWork">
            <div v-if="item.id === null && item.status">
              <div
                v-if="item.id === null && columns.filter(a => a.lcatValue == item.status)[0].lcatName === '已创建' || columns.filter(a => a.lcatValue == item.status)[0].lcatName === '到货登记'"
                style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(69,121,250);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                未开始
              </div>
              <div
                v-if="item.id === null && columns.filter(a => a.lcatValue == item.status)[0].lcatName === '开始作业'"
                style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(121,138,255);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                进行中
              </div>
              <div
                v-if="columns.filter(a => a.lcatValue == item.status)[0].lcatName === '作业完成' || columns.filter(a => a.lcatValue == item.status)[0].lcatName === '入库完成' || columns.filter(a => a.lcatValue == item.status)[0].lcatName === '异常完结' || columns.filter(a => a.lcatValue == item.status)[0].lcatName === '作业异常'"
                style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(15,178,215);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                已完成
              </div>
            </div>
            <div v-if="item.id !== null && item.status">
              <div v-if="item.id !== null && columnNew.filter(a => a.lcatValue == item.status)[0].lcatName === '草稿'"
                   style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(111,199,123);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                {{ columnNew.filter(a => a.lcatValue == item.status)[0].lcatName }}
              </div>
              <div
                v-if="item.id !== null && columnNew.filter(a => a.lcatValue == item.status)[0].lcatName === '已提交'"
                style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(9,121,80);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                {{ columnNew.filter(a => a.lcatValue == item.status)[0].lcatName }}
              </div>
              <el-tooltip class="item" effect="dark" :content="'驳回原因：' + item.refuseRemark" placement="top">
                <div
                  v-if="item.id !== null && columnNew.filter(a => a.lcatValue == item.status)[0].lcatName === '驳回'"
                  style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(246,143,66);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                  {{ columnNew.filter(a => a.lcatValue == item.status)[0].lcatName }}
                </div>
              </el-tooltip>
              <div
                v-if="item.id !== null && columnNew.filter(a => a.lcatValue == item.status)[0].lcatName === '申请成功'"
                style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(15,178,218);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                {{ columnNew.filter(a => a.lcatValue == item.status)[0].lcatName }}
              </div>
            </div>
          </template>
          <template v-else>
            <div
              v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '已审批' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '等待出库'"
              style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(69,121,250);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
              未开始
            </div>
            <div
              v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '移动下架' ||  columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '部分拣货'"
              style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(121,138,255);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
              进行中
            </div>
            <div
              v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '出库完成' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '异常完结' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '作业完成' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '作业异常'"
              style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(15,178,215);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
              已完成
            </div>
            <div v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '草稿'"
                 style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(111,199,123);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
              草稿
            </div>
            <div
              v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '已提交' || columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '已创建'"
              style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(9,121,80);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
              已提交
            </div>
            <el-tooltip class="item" effect="dark" :content="'驳回原因：' + item.reason" placement="top">
              <div v-if="columnsTwo.filter(a => a.lcatValue == item.status)[0].lcatName === '驳回'"
                   style="position: absolute; right: 0; top: 0;width: 80px; height: 30px;background-color:rgb(246,143,66);border-radius: 0px 0px 0px 30px;color:rgb(255,255,255);line-height: 30px;text-align: center;">
                驳回
              </div>
            </el-tooltip>
          </template>
          <div class="cus-card-item">
            <span>箱号：{{ item.containerNum }}</span>
          </div>
          <template v-if="isInWork">
            <Row class="cus-card-item">
              <i-col :span="4">
                <p>预计到达时间：{{ $utils.timestampToDate(item.inEstimateDate) }}</p>
              </i-col>
              <i-col :span="3">
                <span>送货车号：</span>
                <span>{{ item.carNo }}</span>
              </i-col>
              <i-col :span="5">
                <p>送货司机：{{ item.driver }}/{{ item.driverTel }}</p>
              </i-col>
              <i-col :span="3">
                <p>入库日期：{{ $utils.timestampToDate(item.startInTime) }}</p>
              </i-col>
              <i-col :span="4">
                <p>业务员：{{ item.businessPersonal }}/{{ item.businessTel }}</p>
              </i-col>
            </Row>
          </template>
          <template v-else>
            <Row class="cus-card-item">
              <i-col :span="3">
                <p>提货车号：{{ item.carNo }}</p>
              </i-col>
              <i-col :span="4">
                <p>预计提货时间：{{ $utils.timestampToDate(item.outEstimateDate) }}</p>
              </i-col>
              <i-col :span="4">
                <p>送货司机：{{ item.driver }}/{{ item.tel }}</p>
              </i-col>
              <i-col :span="3">
                <p>出库日期：{{ $utils.timestampToDate(item.outStartDate) }}</p>
              </i-col>
              <i-col :span="4">
                <p>业务员：{{ item.createdByName }}/{{ item.createdByMobile }}</p>
              </i-col>
            </Row>
          </template>
          <hr style="margin: 15px 0">
          <template v-if="isInWork">
            <Row class="cus-card-item">
              <i-col v-if="belongUserCustomerList.length" :span="3">
                <span>结算客户：</span>
                {{ agentPermission(item.settlementCustomer) }}
              </i-col>
              <i-col v-else :span="3">
                <span>结算客户：</span>
                {{ item.settlementCustomer === entrustingPartyName ? 'Y' : 'N' }}
              </i-col>
              <i-col :span="5">
                <span>货主：</span>
                {{ item.customerName }}
              </i-col>
              <i-col :span="3">
                <span>计划件数(件)：</span>
                {{ item.sumOrderQty }}
              </i-col>
              <i-col :span="4">
                <span>计划重量(KGS)：</span>
                {{ thousandthPercentile(item.sumOrderWeight || 0) }}
              </i-col>
              <i-col :span="3">
                <span>实际件数(件)：</span>
                {{ item.finishQty }}
              </i-col>
              <i-col :span="4">
                <span>实际重量(KGS)：</span>
                {{ item.finishWeight ? item.finishWeight : '' }}
              </i-col>
            </Row>
            <Row class="cus-card-item">
              <i-col :span="3">
                <span>提单号：</span>
                {{ item.billOfLandingNo ? item.billOfLandingNo : '--' }}
              </i-col>
              <i-col :span="5">
                <span>作业要求：</span>
                {{ item.nucleicAcidTestFlag ? item.nucleicAcidTestFlag != 0 ? '核酸检测' : '' : '' }}
                {{ item.disinfectionSign ? item.disinfectionSign != 'N' ? "消毒" : '' : '' }}
                {{ item.authenticateFlag ? item.authenticateFlag != 0 ? "密钥" : '' : '' }}
                {{ item.ifCodeReading ? item.ifCodeReading != 0 ? "抄码" : '' : '' }}
              </i-col>
              <i-col :span="4">
                <span>计划号：</span>
                {{ item.orderNum }}
              </i-col>
              <i-col :span="4">
                <span>流转：</span>
                <span>{{ item.originType }}</span>
              </i-col>
              <i-col :span="4">
                <span>创建人：</span>
                <span>{{ item.createdByName }}</span>
              </i-col>
            </Row>
            <Row class="cus-card-item">
              <i-col :span="4">
                <span>报税性质：</span>
                <span>{{ goodsBondedPropertyObj[item.goodsBondedProperty] }}</span>
              </i-col>
              <i-col :span="6">
                <span>业务备注：</span>
                <span>{{ item.remark }}</span>
              </i-col>
            </Row>
          </template>
          <template v-else>
            <Row class="cus-card-item">
              <i-col :span="5">
                <span>货主：</span>
                {{ item.cargoOwnerName }}
              </i-col>
              <i-col :span="2">
                <span>结算客户：</span>
                {{ item.settlementCustomerName === entrustingPartyName ? 'Y' : 'N' }}
              </i-col>
              <i-col :span="2">
                <span>计划件数：</span>
                {{ item.sumOutQty }}
              </i-col>
              <i-col :span="4">
                <span>计划重量(KGS)：</span>
                {{ thousandthPercentile(item.sumOutWeight || 0) }}
              </i-col>
              <i-col :span="2">
                <span>实际件数：</span>
                {{ thousandthPercentile(item.sumFinishQty) }}
              </i-col>
              <i-col :span="4">
                <span>实际重量(KGS)：</span>
                {{ thousandthPercentile(item.realWorkWeight || 0) }}
              </i-col>
              <i-col :span="4">
                <span>计划号：</span>
                {{ item.outPlanOrderNum }}
              </i-col>
            </Row>
            <Row class="cus-card-item">
              <i-col :span="5">
                <span>作业要求：</span>
                {{ item.escort != 0 && item.escort != null ? '押车' : '' }}
                {{ item.isScanSn != 0 && item.isScanSn != null ? '抄码' : '' }}
              </i-col>
              <i-col :span="4">
                <span>流转：</span>
                {{ item.originType }}
              </i-col>
              <i-col :span="3">
                <span>创建人：</span>
                {{ item.createdByName }}
              </i-col>
              <i-col :span="4">
                <span>业务备注：</span>
                {{ item.remark }}
              </i-col>
              <i-col :span="3">
                <span>是否押车：</span>
                {{ item.escort ? (item.escort === '1' ? '是' : '否') : '' }}
              </i-col>
              <i-col :span="4">
                <span>放行状态：</span>
                {{ item.escortRelease ? (item.escortRelease === '1' ? '已放行' : '未放行') : '' }}
              </i-col>
            </Row>
          </template>
          <div class="data-detail" v-if="item.showDetail">
            <div v-if="!item.id">
              <div class="data-title">单据详情</div>
              <div v-if="item.busList" style="padding:10px">
                <el-steps :active="item.busList.length">
                  <el-step :title="computedBusinessName(item.busList[0], '计划创建')"
                           :description="computedBusiness(item.busList[0])"></el-step>
                  <el-step :title="computedBusinessName(item.busList[1], '车辆到达')"
                           :description="computedBusiness(item.busList[1])"></el-step>
                  <el-step :title="computedBusinessName(item.busList[2], isInWork ? '到货登记' : '提货登记')"
                           :description="computedBusiness(item.busList[2])"></el-step>
                  <el-step :title="computedBusinessName(item.busList[3], '开始作业')"
                           :description="computedBusiness(item.busList[3])"></el-step>
                  <el-step :title="computedBusinessName(item.busList[4], '作业完成')"
                           :description="computedBusiness(item.busList[4])"></el-step>
<!--                  <el-step :title="computedBusinessName(item.busList[5], '离开园区')"-->
<!--                           :description="computedBusiness(item.busList[5])"></el-step>-->
                </el-steps>
              </div>
              <div v-else>暂无作业进度</div>
            </div>
            <div class="data-title">单据详情</div>
            <div class="data-card cus-card-item" v-for="(goods, index) in item.detailInfo" :key="index">
              <Row>
                <i-col :span="4">
                  <span>品类：</span>
                  <span>{{ isInWork ? goods.matTypCode : goods.matTypName }}</span>
                </i-col>
                <i-col :span="4">
                  <span>商品描述：</span>
                  {{ goods.matName }}
                </i-col>
                <i-col :span="4">
                  <span>商品描述：</span>
                  {{ goods.matName }}
                </i-col>
                <i-col :span="4">
                  <span>外部批次：</span>
                  {{ isInWork ? goods.batchNum : goods.wmsBatchNum }}
                </i-col>
                <i-col :span="4">
                  <span>厂号：</span>
                  {{ goods.factoryCode ? goods.factoryCode : '' }}
                </i-col>
                <i-col :span="4">
                  <span>产品规格：</span>
                  {{ isInWork ? goods.packFormat : goods.packName }}
                </i-col>
                <i-col :span="4">
                  <span>计划件数(件)：{{isInWork ? thousandthPercentile(goods.orderQty || 0) :thousandthPercentile(goods.planOutNum || 0)}} </span>
                </i-col>
                <i-col :span="4">
                  <span>计划重量(KGS)：{{isInWork ? thousandthPercentile(goods.orderWeight || 0) : thousandthPercentile(goods.outWeight || 0) }} </span>
                </i-col>
                <i-col :span="4">
                  <span>实际件数(件)：{{ thousandthPercentile(goods.finishQty || 0) }} </span>
                </i-col>
                <i-col :span="4">
                  <span>实际重量(KGS)：{{ thousandthPercentile(goods.warehousedWeight || 0) }}</span>
                </i-col>
                <i-col :span="4">
                  <span>生产日期：</span>
                  {{ $utils.timestampToDate(goods.dateGen) }}
                </i-col>
                <i-col :span="4">
                  <span>失效日期：</span>
                  {{ $utils.timestampToDate(goods.dateExpire) }}
                </i-col>
                <i-col :span="4" v-if="isInWork">
                  <span>破损件数(件)：{{ goods.badBoxNum }}</span>
                </i-col>
                <i-col :span="4" v-else>
                  <span>出车顺序：{{ goods.seq }}</span>
                </i-col>
                <i-col :span="4">
                  <span>抄码件数(件)：{{ thousandthPercentile(goods.codeQty || 0) }}</span>
                </i-col>
                <i-col :span="4">
                  <span>抄码重量(KGS)：{{ thousandthPercentile(goods.scanSnWeight || 0) }}</span>
                </i-col>
              </Row>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <empty-comp/>
      </template>
    </div>
  </div>
</template>

<script>
import {getCurrentAgentPermissionWareHouse} from "@/libs/handleWareHouseList";
import {thousandthPercentile, useCustomer} from "@/view/wms/js/index";
import {
  delCcisOutStockApply,
  deleteApplyAndApplyDetail,
  getCompleteOrderInfo,
  getEditDataByWmsStock,
  getExWarehouseList, getWarehousingDtail,
  getWarehousingList, selectApplyDetail,
  selectCcisOutStockApplyAndGoodsById, submitApply, submitApplyC
} from "@/api/planInfo";
import {columns, goodsBondedPropertyObj, inWorkStatus, outWorkStatus, columnNew, columnsTwo} from "@/view/wms/js/data";
import axios from "axios";
import EmptyComp from "@/view/wms/comp/EmptyComp.vue";
import {getBusinessprogress} from "@/api/sepPlan";

export default {
  name: "SceneWork",
  components: {EmptyComp},
  data() {
    return {
      inScene: 'in',
      outScene: 'out',
      currentSceneType: 'in',
      wareObj: {},
      wareIds: null,
      wmsUrl: '',
      loading: false,
      columns,
      columnNew,
      columnsTwo,
      statisticsInfo: {
        inNoFinishChestNum: 0,
        inWeight: 0,
        outNoFinishCarNum: 0,
        outChestNum: 0,
        outWeight: 0,
      },
      searchForm: {
        inPlanOrderStatus: [],
        startArrivedDate: [],
        endRegisterDate: [],
        exWarehouse: [],
        expectedDelivery: [],
        planOrderNumList: ''
      },
      dataList: [],
      listQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        filterList: [],
        sortList: [],
        pageOptionsList: [10, 20, 30, 40],
        searchKey: '',
        searchOrderStatusList: [],
        notInMatTypeCodeList: ["9999", "0001"]
      }
    }
  },
  computed: {
    goodsBondedPropertyObj() {
      return goodsBondedPropertyObj
    },
    entrustingPartyName() {
      return this.$utils.getUserInfo().entrustingPartyName
    },
    isInWork() {
      return this.currentSceneType === this.inScene;
    },
    planStatusList() {
      return this.isInWork ? inWorkStatus : outWorkStatus;
    },
    belongUserCustomerList() {
      return window.localStorage.getItem('belongUserCustomerList') ? JSON.parse(window.localStorage.getItem('belongUserCustomerList')) : [];
    },
  },
  methods: {
    thousandthPercentile,
    computedBusinessName(row, prop) {
      if (row) {
        if (row.completeProportion) {
          return prop + '-' + row.completeProportion
        } else {
          return prop
        }
      } else {
        return prop
      }
    },
    computedBusiness(row) {
      if (row) {
        if (row.date) {
          if (row.createName) {
            return row.date + '-' + row.createName
          } else {
            return row.date
          }
        } else {
          if (row.createName) {
            return row.createName
          } else {
            return ''
          }
        }
      }
    },
    getAxios() {
      return new axios.CancelToken((c) => {
          this.cancel = c;
        }
      );
    },
    editInfo(item) {
      if (!this.isInWork) {
        const {id} = item;
        if (id) {
          window.localStorage.setItem('EditInfocode', '200');
          selectCcisOutStockApplyAndGoodsById(id, this.wmsUrl, this.getAxios()).then(({data}) => {
            if (data.returnCode === 200) {
              this.$router.push({
                name: 'OutPlanInfo',
                query: {
                  menuActiveName: JSON.stringify(this.wareIds),
                  wareList: JSON.stringify([this.wareObj]),
                  wmsUrl: JSON.stringify(this.wmsUrl),
                  editItemWarehousing: JSON.stringify(data.returnData.wmsStockDTOList),
                  editItem: JSON.stringify(item),
                  ccisCustomerCode: JSON.stringify(''),
                  editStatus: JSON.stringify('create'),
                  escort: JSON.stringify(data.returnData.wmsOutPlanDTO.escort)
                }
              });
            }
          });
        }
      }
    },
    submitInfo(item) {
      this.$Modal.confirm({
        title: '提示',
        content: '确认进行提交操作',
        onOk: () => {
          const method = this.isInWork ? submitApply : submitApplyC;
          method({id: item.id}, this.wmsUrl, this.getAxios()).then(({data}) => {
            if (data.returnCode === 200) {
              this.$Message.success('操作成功')
              this.initData();
            } else {
              this.$Message.error(data.returnMsg)
            }
          });
        },
        onCancel: () => {
        }
      })
    },
    deleteInfo(item) {
      this.$Modal.confirm({
        title: '提示',
        content: '确认进行删除操作',
        onOk: () => {
          const method = this.isInWork ? deleteApplyAndApplyDetail : delCcisOutStockApply;
          method([item.id], this.wmsUrl, this.getAxios()).then(({data}) => {
            if (data.returnCode === 200) {
              this.$Message.success('操作成功')
              this.initData();
            } else {
              this.$Message.error(data.returnMsg)
            }
          });
        },
        onCancel: () => {
        }
      })
    },
    async getDetailInfo(item) {
      const {orderNum, outPlanOrderNum, id, showDetail} = item;
      item.showDetail = !showDetail;
      if (item.showDetail) {
        let obj = {
          businessType: this.currentSceneType,
          orderNum: this.isInWork ? orderNum : outPlanOrderNum
        }
        const resultBus = await getBusinessprogress(obj, this.wmsUrl);
        let result = null;
        if (this.isInWork) {
          if (!id) {
            result = await getWarehousingDtail({inPlanOrderNum: orderNum}, this.wmsUrl, this.getAxios());
          } else {
            result = await selectApplyDetail({id}, this.wmsUrl, this.getAxios());
          }
        } else {
          if (!id) {
            result = await getEditDataByWmsStock({'outPlanOrderNum': outPlanOrderNum}, this.wmsUrl, this.getAxios())
          } else {
            result = await selectCcisOutStockApplyAndGoodsById(id, this.wmsUrl, this.getAxios());
            result.data.returnData = result.data.returnData.wmsStockDTOList;
          }
        }
        try {
          this.$set(item, 'detailInfo', result.data.returnData);
          this.$set(item, 'busList', this.handleBusInfo(resultBus.data.returnData));
        } catch (err) {
          this.$Message.warning('获取详情失败！');
        }
      } else {
        item.detailInfo = [];
        item.busList = [];
      }
    },
    handleBusInfo(data) {
      data.forEach(keys => {
        if (keys.registerDate) {
          keys.date = this.getLocalTime(keys.registerDate).slice(0, -3)
        }
        if (keys.createTime) {
          keys.date = this.getLocalTime(keys.createTime).slice(0, -3)
        }
        if (keys.entryTime) {
          keys.date = this.getLocalTime(keys.entryTime).slice(0, -3)
        }
        if (keys.lastModifiedTime) {
          keys.date = this.getLocalTime(keys.lastModifiedTime).slice(0, -3)
        }
        if (keys.deliveryTime) {
          keys.date = this.getLocalTime(keys.deliveryTime).slice(0, -3)
        }
        if (keys.operatorName) {
          keys.createName = keys.operatorName
        }
        if (keys.userName) {
          keys.createName = keys.userName;
        }
      });
      return data;
    },
    getLocalTime(n) {
      return new Date(parseInt(n)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    },
    agentPermission(val) {
      if (this.belongUserCustomerList.length && this.belongUserCustomerList.some(item => item.customerName == val)) {
        return 'Y'
      } else {
        return 'N'
      }
    },
    sceneChange(sceneType) {
      this.currentSceneType = sceneType;
      this.reset();
    },
    pageChange(pageNum) {
      this.listQuery.pageNum = pageNum;
      this.initData();
    },
    pageSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize;
      this.initData();
    },
    createdOutWork() {
      window.localStorage.removeItem('EditInfocode');
      this.$router.push({
        name: 'OutPlanInfo',
        query: {
          menuActiveName: JSON.stringify(this.wareIds),
          wareList: JSON.stringify([this.wareObj]),
          wmsUrl: JSON.stringify(this.wmsUrl),
          editItemWarehousing: JSON.stringify(null),
          editItem: JSON.stringify(null),
          ccisCustomerCode: JSON.stringify(useCustomer(this)),
          editStatus: JSON.stringify('edit'),
          escort: JSON.stringify('0')
        }
      })
    },
    searchKeyInfo() {
      this.initData();
    },
    reset() {
      this.searchForm = {
        ownerCodeList: [useCustomer(this)],
        inPlanOrderStatus: [],
        startArrivedDate: [],
        endRegisterDate: [],
        exWarehouse: [],
        expectedDelivery: [],
        planOrderNumList: ''
      };
      this.listQuery.searchKey = '';
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = 10;
      this.initData();
    },
    initData() {
      this.getParam();
      this.isInWork ? this.initInWorkInfo() : this.initOutWorkInfo();
    },
    initInWorkInfo() {
      this.loading = true;
      getWarehousingList({...this.listQuery, applyType: 'in'}, this.wmsUrl, this.getAxios()).then(({data}) => {
        const {returnCode, returnData, returnMsg} = data;
        if (returnCode === 200) {
          this.dataList = returnData.pageInfo.list;
          this.listQuery.total = returnData.pageInfo.total;
          this.dataList.forEach(x => {
            this.$set(x, 'showDetail', false);
            this.$set(x, 'detailInfo', []);
            this.$set(x, 'busList', []);
          });
        } else {
          this.$Message.error(returnMsg);
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    initOutWorkInfo() {
      this.loading = true;
      getExWarehouseList({...this.listQuery, applyType: 'out'}, this.wmsUrl, this.getAxios()).then(({data}) => {
        const {returnCode, returnData, returnMsg} = data;
        if (returnCode === 200) {
          this.dataList = returnData.pageInfo.list;
          this.listQuery.total = returnData.pageInfo.total;
          this.dataList.forEach(x => {
            this.$set(x, 'showDetail', false);
            this.$set(x, 'detailInfo', []);
            this.$set(x, 'busList', []);
          });
        } else {
          this.$Message.error(returnMsg);
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    init() {
      getCurrentAgentPermissionWareHouse().then(({data: returnData, message}) => {
        if (returnData) {
          if (!returnData.length) {
            return this.$Message.error('仓库信息为空！');
          }
          const {ipProt, id} = returnData[0];
          this.wareObj = returnData[0];
          this.wmsUrl = ipProt;
          this.wareIds = id;
          this.searchForm.ownerCodeList = [useCustomer(this)];
          this.initData();
          this.initStatisticsInfo();
        } else if (message) {
          this.$Message.error(message);
        }
      });
    },
    initStatisticsInfo() {
      getCompleteOrderInfo([this.wareIds]).then(({data}) => {
        const {returnCode, returnData, returnMsg} = data;
        if (returnCode === 200) {
          if (returnData.length) {
            const {inPlan, outPlan} = returnData[0];
            if (inPlan) {
              this.statisticsInfo.inNoFinishChestNum = inPlan.boxNum || 0;
              this.statisticsInfo.inWeight = inPlan.weight || 0;
            }
            if (outPlan) {
              this.statisticsInfo.outWeight = outPlan.weight || 0;
              this.statisticsInfo.outChestNum = outPlan.boxNum || 0;
              this.statisticsInfo.outNoFinishCarNum = outPlan.runningNum || 0;
            }
          }
        } else {
          this.$Message.error(returnMsg);
        }
      })
    },
    getParam() {
      this.dataList = [];
      this.listQuery.total = 0;
      this.listQuery.filterList = [];
      this.listQuery.searchOrderStatusList = [];
      const ownerCode = useCustomer(this);
      this.listQuery.filterList.push({
        filterKey: 'cargoOwner',
        filterValue: ownerCode
      });
      this.listQuery.filterList.push({
        filterKey: 'ownerCode',
        filterValue: ownerCode
      });
      if (this.searchForm.startArrivedDate && this.searchForm.startArrivedDate.length > 0) {
        this.listQuery.filterList.push({
          filterKey: 'startArrivedTime',
          filterValue: this.$utils.dateToDateStr(this.searchForm.startArrivedDate[0])
        });
        this.listQuery.filterList.push({
          filterKey: 'endArrivedTime',
          filterValue: this.$utils.dateToDateStr(this.searchForm.startArrivedDate[1])
        });
      }

      if (this.searchForm.endRegisterDate && this.searchForm.endRegisterDate.length > 0) {
        this.listQuery.filterList.push({
          filterKey: 'startInTime',
          filterValue: this.$utils.dateToDateStr(this.searchForm.endRegisterDate[0])
        });
        this.listQuery.filterList.push({
          filterKey: 'endInTime',
          filterValue: this.$utils.dateToDateStr(this.searchForm.endRegisterDate[1])
        });
      }

      if (this.searchForm.expectedDelivery && this.searchForm.expectedDelivery.length > 0) {
        this.listQuery.filterList.push({
          filterKey: 'outStartEstimateDate',
          filterValue: this.$utils.dateToDateStr(this.searchForm.expectedDelivery[0])
        });
        this.listQuery.filterList.push({
          filterKey: 'outEndEstimateDate',
          filterValue: this.$utils.dateToDateStr(this.searchForm.expectedDelivery[1])
        });
      }

      if (this.searchForm.exWarehouse && this.searchForm.exWarehouse.length > 0) {
        this.listQuery.filterList.push({
          filterKey: 'outStartSDate',
          filterValue: this.$utils.dateToDateStr(this.searchForm.exWarehouse[0])
        });
        this.listQuery.filterList.push({
          filterKey: 'outStartEndDate',
          filterValue: this.$utils.dateToDateStr(this.searchForm.exWarehouse[1])
        });
      }
      this.searchForm.inPlanOrderStatus.forEach(item => {
        this.listQuery.searchOrderStatusList.push(...item.split(','))
      });
    },
  },
  mounted() {
    const planNum = this.$route.query.planNum;
    if (planNum) {
      this.currentSceneType = planNum === 2 ? this.outScene : this.inScene;
    }
    this.init();
  }
}
</script>

<style scoped lang="less">
.data-card {
  width: 100%;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 4px 1px #afaeae;
  margin-bottom: 10px;
  border-radius: 2px;
  position: relative;
}

.data-title {
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  background-color: #fff;
}
.data-detail {
  background-color: #F4F8FA;
}
.colorInfo {
  color: #4F68E8;
  cursor: default;
  font-size: 14px;
}

.data-operate {
  position:absolute;
  right: 20px;
  top: 80px;
  z-index:1000;
  font-size: 14px;
}

.statistics-info {
  display: flex;
  width: 100%;
  padding: 10px;

  .statistics-card {
    margin-right: 10px;
    width: 300px;
    height: 100px;
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 10px 20px;
    color: rgba(0, 0, 0, 0.85);

    .statistics-info-title {
      font-size: 18px;
      font-weight: bold;
    }

    .statistics-info-item {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;

      .statistics-info-item-label {
        color: rgba(0, 0, 0, 0.35);
      }

      .statistics-info-item-content {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }

  .checked {
    border: 1px solid rgba(79, 104, 232, 1);
    background-color: rgba(79, 104, 232, 0.1);
  }
}

.work-search-frame {
  width: 100%;
  padding: 10px;
}

.work-data {
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgb(238, 238, 238);
}

.cus-card-item {
  font-size: 14px;
  margin-top: 5px;
}

.margin-left-5 {
  margin-left: 5px;
}
</style>
